<template>
<view class="container">
    <view class="disgoods-list">
        <view v-for="(item, index) in goods" :key="index" class="choice_item">
            <view class="goods-check"><checkbox :checked="item.selected" @tap="selectGoods" :data-id="item.goods_id"></checkbox></view>
            <view class="img-wrap">
                <image @tap="goodsDetail" :data-id="item.goods_id" :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_id + '&width=200&height=200'"></image>
            </view>
            <view class="item-cont">
                <view class="title" @tap="goodsDetail" :data-id="item.goods_id">{{item.goods_name}}</view>
                <view class="price">分成金额：￥{{item.commission}}</view>
                <view class="comment">￥{{item.shop_price}}</view>
            </view>
        </view>
    </view>
    <view class="no-data" v-if="!goods || goods.length == 0">
        <image src="/static/images/cart-null.png" class="cart-image"></image>
        <view class="no-data-title">没有相关的数据</view>
    </view>
    <view class="distri-bot" :hidden="!goods || goods.length == 0">
        <view class="bot-left">
            <checkbox class="check-all" :checked="checkAllToggle" @tap="checkAll"></checkbox>
            <label>全选</label>
        </view>
        <view class="bot-right" @tap="delGoods">
            <button>删除</button>
        </view>
    </view>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      requestUrl: '',
      //请求的链接
      goods: null,
      checkAllToggle: false,
      //全选标志
      currentPage: 1,
      result: [],
      goodList: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    this.requestGoodsList();
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.requestGoodsList();
    }
  },
  methods: {
    requestGoodsList: function () {
      var that = this;
      var requestUrl = '/api/Distribut/distribution_list?p=' + that.currentPage;
      request.get(requestUrl, {
        success: function (res) {
          if (that.currentPage > 1) {
            var data = [...that.goods, ...res.data.result];
            that.setData({
              goods: data
            });
          } else {
            that.setData({
              goods: res.data.result
            });
          }

          that.currentPage++;
          uni.stopPullDownRefresh();
        }
      });
    },
    //全选
    checkAll: function () {
      var checkAll = !this.checkAllToggle;
      var goodList = [];
      var goods = this.goods;

      if (goods == null || goods.length <= 0) {
        return;
      }

      for (var i = 0; i < goods.length; i++) {
        goodList.push({
          goods_id: goods[i].goods_id,
          goods_name: goods[i].goods_name,
          selected: checkAll,
          commission: goods[i].commission,
          shop_price: goods[i].shop_price
        });
      }

      this.setData({
        goods: goodList
      });
      this.setData({
        checkAllToggle: checkAll
      });
    },

    /** 选择单一商品 */
    selectGoods: function (e) {
      var id = e.currentTarget.dataset.id;
      var goodList = this.goods;

      for (var i = 0; i < goodList.length; i++) {
        if (id == goodList[i].goods_id) {
          goodList[i].selected = !goodList[i].selected;
        }
      }

      var checkAll = true;

      for (var j = 0; j < goodList.length; j++) {
        if (!goodList[j].selected) {
          checkAll = false;
        }
      }

      this.setData({
        checkAllToggle: checkAll
      });
      this.setData({
        goodList: goodList
      });
    },
    //删除商品
    delGoods: function () {
      var that = this;
      var ids = [];
      var goodList = this.goods;

      for (var i = 0; i < goodList.length; i++) {
        if (goodList[i].selected) {
          ids.push(goodList[i].goods_id);
        }
      }

      if (ids.length <= 0) {
        app.globalData.showTextWarining("还没有选中商品");
        return;
      }

      request.post('/api/Distribut/delete', {
        data: {
          goods_ids: ids,
          terminal: "miniapp"
        },
        success: function (res) {
          if (res.data.status == 1) {
            app.globalData.showSuccess('操作成功', function () {
              that.setData({
                currentPage: 1
              });
              that.requestGoodsList();
            });
          }
        }
      });
    },
    goodsDetail: function (e) {
      var goodsId = e.currentTarget.dataset.id;
      uni.navigateTo({
        url: '/pages/goods/goodsInfo/goodsInfo?goods_id=' + goodsId
      });
    }
  }
};
</script>
<style>
/*checkbox重写样式*/
page{
    background: white;
}
checkbox .wx-checkbox-input{
   border-radius: 50%;
   width: 40rpx;
   height: 40rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
   border: none;
   background: red;
   width: 44rpx;
   height: 44rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
   border-radius: 50%;
   width: 40rpx;
   height: 40rpx;
   line-height: 40rpx;
   text-align: center;
   font-size:30rpx;
   color:#fff;
   background: transparent;
   transform:translate(-50%, -50%) scale(1);
   -webkit-transform:translate(-50%, -50%) scale(1);
}
/*主样式*/
.container{
     background-color: #fff;
}
.ico-dir{
    width: 16rpx;
    height: 22rpx;
    margin-left: 10rpx;  
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 0;
}
.ico-dir-dn {
    background-position-x: -16rpx;
}
.ico-dir-up {
    background-position-x: -32rpx;
}
.disgoods-list{
    width: 100%;
    padding-bottom: 100rpx;
}
.choice_item{
    position: relative;
    width: 94%;
    min-height: 200rpx;
    padding: 10rpx 3%;
    border-bottom: 1px solid #f3f3f3;
    font-size: 28rpx;
}
.goods-check{
    float: left;
    margin-right: 10px;
    margin-top: 76rpx;
}
.img-wrap{
    float: left;
    width: 180rpx;
    height: 180rpx;
    padding:0 10rpx 10rpx;
    margin-right: 10px;
}
.img-wrap image{
    width: 100%;
    height: 100%;
}
.item-cont .title{
    height: 72rpx;
    margin: 12rpx 0;
    padding-right: 10rpx;
    line-height: 36rpx;
    color: #333;
    overflow: hidden;   
}
.price{
    display: inline-block;
    color: #999;
    padding-bottom: 20rpx;
}
.comment{
    color: #ff6a00;
}
.distri-bot{
    width: 100%;
    height: 100rpx; 
    background-color: #ededed;
    position: fixed; 
    left: 0; 
    bottom: 0;
}
.bot-left{ 
    width: 80%; 
    float: left;
    line-height: 100rpx;
}
.bot-left .check-all{
    margin-left: 10px;
}
.bot-left label{
    vertical-align: middle;
}
.bot-right{ 
    width: 20%; 
    float: right;
}
.bot-right button{
    background-color: #ff6a00;
    border: none; 
    line-height: 100rpx;
    color: #fff;
    font-size: 14px;
}

</style>